<template>
  <div class="backup-page">
    <div class="page-header">
      <h2>数据备份</h2>
    </div>

    <!-- 备份状态 -->
    <div class="backup-status">
      <div class="status-card">
        <div class="status-icon">💾</div>
        <div class="status-content">
          <div class="status-title">数据库状态</div>
          <div class="status-value">正常</div>
          <div class="status-desc">最后备份：2024-01-15 10:30:00</div>
        </div>
      </div>
      <div class="status-card">
        <div class="status-icon">📊</div>
        <div class="status-content">
          <div class="status-title">数据大小</div>
          <div class="status-value">256 MB</div>
          <div class="status-desc">包含所有业务数据</div>
        </div>
      </div>
      <div class="status-card">
        <div class="status-icon">🔄</div>
        <div class="status-content">
          <div class="status-title">自动备份</div>
          <div class="status-value">已启用</div>
          <div class="status-desc">每日凌晨2点自动备份</div>
        </div>
      </div>
    </div>

    <!-- 备份操作 -->
    <div class="backup-actions">
      <div class="action-section">
        <h3>手动备份</h3>
        <div class="action-buttons">
          <button @click="createBackup" class="action-btn primary">
            <span class="btn-icon">💾</span>
            创建备份
          </button>
          <button @click="scheduleBackup" class="action-btn secondary">
            <span class="btn-icon">⏰</span>
            设置定时备份
          </button>
        </div>
      </div>

      <div class="action-section">
        <h3>数据恢复</h3>
        <div class="action-buttons">
          <button @click="restoreBackup" class="action-btn warning">
            <span class="btn-icon">🔄</span>
            恢复数据
          </button>
          <button @click="exportData" class="action-btn info">
            <span class="btn-icon">📤</span>
            导出数据
          </button>
        </div>
      </div>
    </div>

    <!-- 备份历史 -->
    <div class="backup-history">
      <h3>备份历史</h3>
      <div class="history-table">
        <table>
          <thead>
            <tr>
              <th>备份时间</th>
              <th>备份类型</th>
              <th>文件大小</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="backup in backupHistory" :key="backup.id">
              <td>{{ formatDateTime(backup.time) }}</td>
              <td>
                <span class="backup-type" :class="backup.type">
                  {{ getBackupTypeText(backup.type) }}
                </span>
              </td>
              <td>{{ backup.size }}</td>
              <td>
                <span class="status-badge" :class="backup.status">
                  {{ getStatusText(backup.status) }}
                </span>
              </td>
              <td class="actions">
                <button @click="downloadBackup(backup)" class="download-btn">下载</button>
                <button @click="restoreFromBackup(backup)" class="restore-btn">恢复</button>
                <button @click="deleteBackup(backup.id)" class="delete-btn">删除</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- 系统维护 -->
    <div class="maintenance-section">
      <h3>系统维护</h3>
      <div class="maintenance-tools">
        <div class="tool-card">
          <div class="tool-icon">🧹</div>
          <div class="tool-content">
            <h4>数据清理</h4>
            <p>清理过期日志和临时文件</p>
            <button @click="cleanData" class="tool-btn">开始清理</button>
          </div>
        </div>
        <div class="tool-card">
          <div class="tool-icon">🔧</div>
          <div class="tool-content">
            <h4>数据库优化</h4>
            <p>优化数据库性能和索引</p>
            <button @click="optimizeDatabase" class="tool-btn">开始优化</button>
          </div>
        </div>
        <div class="tool-card">
          <div class="tool-icon">📋</div>
          <div class="tool-content">
            <h4>系统检查</h4>
            <p>检查系统完整性和一致性</p>
            <button @click="checkSystem" class="tool-btn">开始检查</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 备份设置 -->
    <div class="backup-settings">
      <h3>备份设置</h3>
      <div class="settings-form">
        <div class="form-group">
          <label class="checkbox-label">
            <input v-model="backupSettings.autoBackup" type="checkbox" />
            启用自动备份
          </label>
        </div>
        <div class="form-group">
          <label>备份频率</label>
          <select v-model="backupSettings.frequency" class="form-select">
            <option value="daily">每日</option>
            <option value="weekly">每周</option>
            <option value="monthly">每月</option>
          </select>
        </div>
        <div class="form-group">
          <label>备份时间</label>
          <input v-model="backupSettings.backupTime" type="time" class="form-input" />
        </div>
        <div class="form-group">
          <label>保留备份数量</label>
          <input v-model="backupSettings.retentionCount" type="number" min="1" max="30" class="form-input" />
        </div>
        <div class="form-group">
          <label>备份存储路径</label>
          <input v-model="backupSettings.storagePath" class="form-input" />
        </div>
        <div class="form-actions">
          <button @click="saveBackupSettings" class="save-btn">保存设置</button>
        </div>
      </div>
    </div>

    <!-- 备份进度弹窗 -->
    <div v-if="showBackupModal" class="modal">
      <div class="modal-content">
        <h3>{{ backupModalTitle }}</h3>
        <div class="progress-section">
          <div class="progress-bar">
            <div class="progress-fill" :style="{ width: backupProgress + '%' }"></div>
          </div>
          <div class="progress-text">{{ backupProgress }}%</div>
        </div>
        <div class="progress-status">{{ backupStatus }}</div>
        <div class="modal-actions">
          <button @click="cancelBackup" class="cancel-btn">取消</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 响应式数据
const showBackupModal = ref(false)
const backupModalTitle = ref('')
const backupProgress = ref(0)
const backupStatus = ref('')

// 备份设置
const backupSettings = ref({
  autoBackup: true,
  frequency: 'daily',
  backupTime: '02:00',
  retentionCount: 7,
  storagePath: '/backups/'
})

// 备份历史
const backupHistory = ref([
  {
    id: 1,
    time: '2024-01-15 10:30:00',
    type: 'manual',
    size: '256 MB',
    status: 'completed'
  },
  {
    id: 2,
    time: '2024-01-14 02:00:00',
    type: 'auto',
    size: '255 MB',
    status: 'completed'
  },
  {
    id: 3,
    time: '2024-01-13 02:00:00',
    type: 'auto',
    size: '254 MB',
    status: 'completed'
  },
  {
    id: 4,
    time: '2024-01-12 02:00:00',
    type: 'auto',
    size: '253 MB',
    status: 'completed'
  },
  {
    id: 5,
    time: '2024-01-11 02:00:00',
    type: 'auto',
    size: '252 MB',
    status: 'completed'
  }
])

// 方法
const formatDateTime = (dateTimeString) => {
  return new Date(dateTimeString).toLocaleString('zh-CN')
}

const getBackupTypeText = (type) => {
  const types = {
    manual: '手动备份',
    auto: '自动备份'
  }
  return types[type] || type
}

const getStatusText = (status) => {
  const statuses = {
    completed: '已完成',
    failed: '失败',
    in_progress: '进行中'
  }
  return statuses[status] || status
}

const createBackup = () => {
  backupModalTitle.value = '创建备份'
  backupProgress.value = 0
  backupStatus.value = '正在准备备份...'
  showBackupModal.value = true
  
  // 模拟备份进度
  const interval = setInterval(() => {
    backupProgress.value += 10
    if (backupProgress.value <= 30) {
      backupStatus.value = '正在备份数据库...'
    } else if (backupProgress.value <= 60) {
      backupStatus.value = '正在压缩数据...'
    } else if (backupProgress.value <= 90) {
      backupStatus.value = '正在保存备份文件...'
    } else {
      backupStatus.value = '备份完成！'
      clearInterval(interval)
      setTimeout(() => {
        showBackupModal.value = false
        alert('备份创建成功！')
      }, 1000)
    }
  }, 500)
}

const scheduleBackup = () => {
  alert('定时备份设置功能开发中...')
}

const restoreBackup = () => {
  if (confirm('确定要恢复数据吗？这将覆盖当前数据！')) {
    alert('数据恢复功能开发中...')
  }
}

const exportData = () => {
  alert('数据导出功能开发中...')
}

const downloadBackup = (backup) => {
  alert(`正在下载备份文件：${backup.time}`)
}

const restoreFromBackup = (backup) => {
  if (confirm(`确定要从备份 ${backup.time} 恢复数据吗？`)) {
    alert('数据恢复功能开发中...')
  }
}

const deleteBackup = (backupId) => {
  if (confirm('确定要删除这个备份吗？')) {
    const index = backupHistory.value.findIndex(b => b.id === backupId)
    if (index > -1) {
      backupHistory.value.splice(index, 1)
    }
  }
}

const cleanData = () => {
  alert('数据清理功能开发中...')
}

const optimizeDatabase = () => {
  alert('数据库优化功能开发中...')
}

const checkSystem = () => {
  alert('系统检查功能开发中...')
}

const saveBackupSettings = () => {
  alert('备份设置已保存！')
}

const cancelBackup = () => {
  showBackupModal.value = false
}
</script>

<style scoped>
.backup-page {
  padding: 20px;
  background: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 30px;
}

.page-header h2 {
  margin: 0;
  font-size: 24px;
  color: #303133;
}

/* 备份状态 */
.backup-status {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.status-card {
  background: white;
  padding: 24px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.status-icon {
  font-size: 36px;
  margin-right: 16px;
}

.status-title {
  font-size: 14px;
  color: #606266;
  margin-bottom: 4px;
}

.status-value {
  font-size: 20px;
  font-weight: 700;
  color: #303133;
  margin-bottom: 4px;
}

.status-desc {
  font-size: 12px;
  color: #909399;
}

/* 备份操作 */
.backup-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.action-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.action-section h3 {
  margin: 0 0 20px 0;
  font-size: 18px;
  color: #303133;
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.action-btn.primary {
  background: #409eff;
  color: white;
}

.action-btn.secondary {
  background: #67c23a;
  color: white;
}

.action-btn.warning {
  background: #e6a23c;
  color: white;
}

.action-btn.info {
  background: #909399;
  color: white;
}

.action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.btn-icon {
  font-size: 20px;
}

/* 备份历史 */
.backup-history {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.backup-history h3 {
  margin: 0 0 20px 0;
  font-size: 18px;
  color: #303133;
}

.history-table {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
}

th {
  background: #fafafa;
  font-weight: 600;
  color: #303133;
  font-size: 14px;
}

.backup-type {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  color: white;
}

.backup-type.manual {
  background: #409eff;
}

.backup-type.auto {
  background: #67c23a;
}

.status-badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  color: white;
}

.status-badge.completed {
  background: #67c23a;
}

.status-badge.failed {
  background: #f56c6c;
}

.status-badge.in_progress {
  background: #e6a23c;
}

.actions {
  display: flex;
  gap: 8px;
}

.download-btn, .restore-btn, .delete-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.download-btn {
  background: #409eff;
  color: white;
}

.restore-btn {
  background: #67c23a;
  color: white;
}

.delete-btn {
  background: #f56c6c;
  color: white;
}

.download-btn:hover {
  background: #337ecc;
}

.restore-btn:hover {
  background: #5daf34;
}

.delete-btn:hover {
  background: #e45656;
}

/* 系统维护 */
.maintenance-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.maintenance-section h3 {
  margin: 0 0 20px 0;
  font-size: 18px;
  color: #303133;
}

.maintenance-tools {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.tool-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: #f5f7fa;
  border-radius: 8px;
}

.tool-icon {
  font-size: 32px;
}

.tool-content h4 {
  margin: 0 0 8px 0;
  font-size: 16px;
  color: #303133;
}

.tool-content p {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: #606266;
}

.tool-btn {
  padding: 8px 16px;
  background: #409eff;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
}

.tool-btn:hover {
  background: #337ecc;
}

/* 备份设置 */
.backup-settings {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.backup-settings h3 {
  margin: 0 0 20px 0;
  font-size: 18px;
  color: #303133;
}

.settings-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-size: 14px;
  font-weight: 600;
  color: #303133;
}

.form-input, .form-select {
  padding: 12px 16px;
  border: 2px solid #e4e7ed;
  border-radius: 8px;
  font-size: 16px;
  outline: none;
  transition: border-color 0.3s;
}

.form-input:focus, .form-select:focus {
  border-color: #409eff;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #303133;
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

.form-actions {
  margin-top: 20px;
}

.save-btn {
  padding: 12px 24px;
  background: #409eff;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
}

.save-btn:hover {
  background: #337ecc;
}

/* 弹窗样式 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: 12px;
  padding: 30px;
  min-width: 400px;
  text-align: center;
}

.modal-content h3 {
  margin: 0 0 20px 0;
  font-size: 20px;
  color: #303133;
}

.progress-section {
  margin-bottom: 20px;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 12px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #409eff, #67c23a);
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 18px;
  font-weight: 700;
  color: #409eff;
  margin-bottom: 12px;
}

.progress-status {
  font-size: 14px;
  color: #606266;
  margin-bottom: 24px;
}

.modal-actions {
  display: flex;
  justify-content: center;
}

.cancel-btn {
  padding: 12px 24px;
  background: #f56c6c;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
}

.cancel-btn:hover {
  background: #e45656;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .backup-page {
    padding: 15px;
  }
  
  .backup-status {
    grid-template-columns: 1fr;
  }
  
  .backup-actions {
    grid-template-columns: 1fr;
  }
  
  .maintenance-tools {
    grid-template-columns: 1fr;
  }
  
  .history-table {
    overflow-x: auto;
  }
  
  .actions {
    flex-direction: column;
  }
  
  .modal-content {
    min-width: 90%;
    margin: 20px;
  }
}
</style> 